<template>
    <view class="image-list-wrap">
        <!-- 列表背景 -->
        <ListBg :merchantMode="merchantMode"></ListBg>
        <!-- 三亚亚龙湾景区 -->
        <view class="yalongwan" v-if="merchantMode === 'yalongwan'">
            <image class="yalongwan-banner" src="@/pages/indexPages/static/searchResults/yalongwan/top-banner.jpg" mode="widthFix"></image>
            <view class="yalongwan-list">
                <YaLongWan v-for="(item, index) in photoList" :key="index" :imageInfo="item" :imageIndex="index" @gotoPreView="gotoPreView" @selectPhoto="selectPhoto"></YaLongWan>
                <image class="yalongwan-bottom-banner" src="@/pages/indexPages/static/searchResults/yalongwan/bottom-banner.png" mode="widthFix"></image>
            </view>
        </view>
        <!-- 三亚其他景区 -->
        <view class="sanya" v-else-if="merchantMode === 'yalongwan' || merchantMode === 'sanya'">
            <image class="sanya-banner" src="@/pages/indexPages/static/searchResults/sanya/top-banner.jpg" mode="widthFix"></image>
            <view class="sanya-list">
                <SanYa v-for="(item, index) in photoList" :key="index" :imageInfo="item" :imageIndex="index" @gotoPreView="gotoPreView" @selectPhoto="selectPhoto"></SanYa>
                <image class="sanya-bottom-banner" src="@/pages/indexPages/static/searchResults/sanya/bottom-banner.png" mode="widthFix"></image>
            </view>
        </view>
        <!-- 九江滑雪场 -->
        <view class="huaxue" v-else-if="merchantMode === 'huaxue'">
            <image class="huaxue-banner" src="@/pages/indexPages/static/searchResults/huaxue/top-banner.jpg" mode="widthFix"></image>
            <view class="huaxue-list">
                <HuaXue v-for="(item, index) in photoList" :key="index" :imageInfo="item" :imageIndex="index" @gotoPreView="gotoPreView" @selectPhoto="selectPhoto"></HuaXue>
                <image class="huaxue-bottom-banner" src="@/pages/indexPages/static/searchResults/huaxue/bottom-banner.png" mode="widthFix"></image>
            </view>
        </view>
        <!-- 黄腾峡和默认的景区列表 -->
        <view class="imginfo-wrap"  v-else :class="{ huangtengxia: merchantMode === 'huangtengxia' }">
            <ImageItem v-for="(item, index) in photoList" :key="index" :imageInfo="item" :imageIndex="index" @gotoPreView="gotoPreView" @selectPhoto="selectPhoto"></ImageItem>
        </view>
    </view>
</template>
<script>
import { accAdd, floatMul } from '@/common/utils.js';
import ListBg from './ListBg.vue';
import ImageItem from './ImageItem.vue';
import YaLongWan from './YaLongWan.vue';
import HuaXue from './HuaXue.vue';
import SanYa from './SanYa.vue';

export default {
    name: '',
    data() {
        return {
            photoList: [],
            driftNameList: [
                '猛士漂起点',
                '悬崖转艇',
                '猛龙穿洞',
                '卷龙出寨',
                '杜鹃映红',
                '瀑布飞艇',
                '青蛙跳潭',
                '众仙过海',
                '勇士漂起点',
                '翡翠三叠',
                '神龙赐水',
                '银珠落玉盘',
                '曲水回环',
                '群龙戏水',
                '双龙出海',
                '勇士漂终点'
            ],
            // 是否全选
            isSelectdAll: false
        };
    },
    props: {
        originList: {
            type: Array,
            required: true
        },
        merchantMode: {
            type: String,
            default: ''
        },
        packPrice: {
            type: Number,
            default: 0
        }
    },
    computed: {},
    mounted() {},
    created() {
        uni.$on('updateSelectdAllStatus', data => {
            this.updateSelectdAllStatus(data.status);
        });
    },
    methods: {
        updateSelectdAllStatus(status) {
            this.photoList.forEach(item => {
                item.isSelected = status;
            });
            this.isSelectdAll = status;
            this.checkIsSelectedAll();
            this.calculatePicCount();
        },
        // 预览照片
        gotoPreView(item) {
            this.$emit('gotoPreView', item);
        },
        // 单击选中或取消选中
        selectPhoto(index) {
            let item = this.photoList[index];
            item.isSelected = !item.isSelected;
            this.checkIsSelectedAll();
            this.calculatePicCount();
        },
        // 判断是否已经全部选中
        checkIsSelectedAll() {
            this.isSelectdAll = this.photoList.every(item => {
                return item.isSelected === true;
            });
        },
        // 计算选中照片数量
        calculatePicCount() {
            let hadSelectPicCount = 0;
            // 所有照片总金额（未计算打包价价和优惠券）
            let allSaleAmount = 0;
            // 打包之后价格
            let packagedPrice = 0;
            let photosIdArr = [];
            // 打包类型   打包是2  默认是3
            let type = 3;
            this.photoList.forEach((item, index) => {
                if (item.isSelected) {
                    hadSelectPicCount += 1;
                    allSaleAmount = accAdd(allSaleAmount, item.price);
                    photosIdArr.push(item.photoid);
                }
            });
            // 如果所有照片总金额比打包金额大的话  那么优惠价格=总金额-打包金额  那么支付金额=打包金额
            if (allSaleAmount > this.packPrice && this.packPrice > 0) {
                packagedPrice = this.packPrice;
                type = 2;
            } else {
                packagedPrice = allSaleAmount;
            }

            this.$emit('getPhotosData', {
                isSelectdAll: this.isSelectdAll,
                saleAmount: allSaleAmount,
                packagedPrice: packagedPrice,
                hadSelectPicCount: hadSelectPicCount,
                ids: JSON.stringify(photosIdArr),
                type: type
            });
        }
    },
    components: { ListBg, ImageItem, YaLongWan, SanYa,HuaXue },
    watch: {
        originList: {
            handler(newVal, oldVal) {
                this.photoList = newVal.filter((item, index) => {
                    item.driftName = this.driftNameList[index % 16];
                    return index < 32;
                });
            },
            deep: true,
            immediate: true
        }
    }
};
</script>
<style lang="less" scoped="scoped">
.image-list-wrap {
    position: relative;
    font-size: 0;
    width: 100%;
    overflow: hidden;
    min-height: calc(100vh - 78rpx);
    .imginfo-wrap {
        position: relative;
        left: 0;
        top: 200rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 76rpx;
    }
    .yalongwan {
        position: relative;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0 44rpx;
        .yalongwan-banner {
            width: 750rpx;
            height: 240rpx;
        }
        .yalongwan-list {
            position: relative;
            background: #fffbdb;
            width: 100%;
            box-sizing: border-box;
            z-index: 2;
            margin-top: 44rpx;
            margin-bottom: 44rpx;
            border-radius: 10rpx;
        }
        .yalongwan-bottom-banner {
            width: 661rpx;
            height: 309rpx;
        }
    }
    .sanya {
        position: relative;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0 44rpx;
        .sanya-banner {
            width: 750rpx;
            height: 240rpx;
        }
        .sanya-list {
            position: relative;
            background: #fff4e9;
            width: 100%;
            box-sizing: border-box;
            z-index: 2;
            margin-top: 44rpx;
            margin-bottom: 44rpx;
            border-radius: 10rpx;
            padding-top: 64rpx;
        }
        .sanya-bottom-banner {
            width: 661rpx;
            height: 123rpx;
            z-index: 22;
            position: relative;
        }
    }
    
    .huaxue {
        position: relative;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0 44rpx;
        .huaxue-banner {
            width: 750rpx;
            height: 240rpx;
        }
        .huaxue-list {
            position: relative;
            background: #fff4e9;
            width: 100%;
            box-sizing: border-box;
            z-index: 2;
            margin-top: 44rpx;
            margin-bottom: 44rpx;
            border-radius: 10rpx;
            padding-top: 64rpx;
        }
        .huaxue-bottom-banner {
            width: 661rpx;
            height: 123rpx;
            z-index: 22;
            position: relative;
        }
    }
    

    .huangtengxia {
        top: 820rpx;
        padding-bottom:742rpx;
    }
    
}
</style>
